<template>
  <div id="dynamicLineGrahpic"></div>
</template>

<script>
    import { getToday,getOneMonthAge,getOneYearAgo,dateFormatString,dateFormatFullString } from "@/util/util";
    
    export default{
        props:{
            searcherId:Number,      //查询对象的ID
            /* 
              查询对象的类型:全国、省级、园区、企业、传感器
                             country,province,industry,company,sensor
            */
            searcherType:String,    
            graphicTitle:String,    //图表标题
            graphicWidth:Number,    //图表宽度
            graphicHeight:Number,   //图表高度
            dynamicDatas : Array,
        },
        data () {
            return {
                // datas:[],
                myChart:{},
                dateList:[],
                valueList:[],
                // timer:null,
                // startTime:String,       //查询起始时间
                // endTime:String,         //查询结束时间 
            }
        },
        watch :{
            dynamicDatas:{
                handler(newValue, oldValue) {
                    this.graphicDataDispatch();
                    this.redrawnGraphic();
                },
            }
        },
        mounted() {
            this.parametertInit();
            this.drawDynamicGraphic();

            //this.setTimer();
        },

        methods:{

            parametertInit(){

                /*
                初始化图表的大小
                */
                document.getElementById("dynamicLineGrahpic").style.width = this.graphicWidth + "px";
                document.getElementById("dynamicLineGrahpic").style.height = this.graphicHeight + "px";
            },

            drawDynamicGraphic(){
                this.myChart = this.$echarts.init(document.getElementById('dynamicLineGrahpic'));
                this.myChart.resize();
                // this.getDatasOnFirstInit();
                this.graphicDataDispatch();
                this.myChart.setOption({
                    title: {
                        text: this.graphicTitle
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: [{
                        data: this.dateList
                    }],
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: '实时流量',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data:this.valueList
                    }]
                });
            },

            /** 
             * 图表数据拼装
            */
            graphicDataDispatch(){
                this.dateList = this.dynamicDatas.map((item)=> {
                    return item['time'];
                });

                this.valueList = this.dynamicDatas.map((item)=> {
                    return item['value'];
                });
            },

            /**
             * 定时获取最新数据
             */
            // setTimer(){
            //     this.timer = setInterval( ()=> {
            //         this.getLastData();
            //     }, 5000); 
            // },

            /**
             * 页面初始化时获取数据
             */
            // getDatasOnFirstInit(){
            //     this.startTime = getToday();
            //     this.endTime = new Date();
            //     this.valueList = [];
            //     this.dateList = [];
            //     var split = (this.endTime - this.startTime)/( 5 * 60 * 1000);
            //     var tempTime = this.startTime;
            //     for(var i=1;i<split;i++){
            //         this.valueList.push(parseInt(1000 + Math.random() * 210 - 100));
            //         this.dateList.push(dateFormatFullString(tempTime));
            //         tempTime = new Date(tempTime.getTime() +  5 * 60 * 1000);
            //     }
            // },

            /** 
             * 数据更新后，重新绘制图形
            */
            redrawnGraphic(){
                this.myChart.setOption({
                    xAxis: [{
                        data: this.dateList
                    }],
                    series: [{
                        data: this.valueList
                    }]
                });
            },

            /**
             * 获取最新的数据
             */
            // getLastData(){
            //     this.dateList.push(dateFormatFullString(new Date()));
            //     this.valueList.push(parseInt(1000 + Math.random() * 200 - 100))
            //     this.redrawnGraphic();
            // },

        }
    }
</script>